<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>个人设置</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/Wx/css/base.css" />
<link rel="stylesheet" type="text/css" href="__PUBLIC__/Wx/css/detail.css" />
<link href="__PUBLIC__/Wx/css/layout.min.css" rel="stylesheet" />
<link href="__PUBLIC__/Wx/css/scs.min.css" rel="stylesheet" />
</head>
<style>
.write ul li span{
	float: left;
}
</style>
<body>
<div class="detail">
  <form  id="authen" action="__MODULE__/Authentication/edit_binding" method="post">
    <div class="write">
      <ul>
        <!--<li><span>用户</span>
          <input type="text" name="realname" value="{$realname}" placeholder="请输入" required/>
        </li>
        <li> <span>手机号</span>
          <input type="text" name="mobile" placeholder="请输入电话" value="{$mobile}" style="width:32%;" pattern="(\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$" required/>
          <input type="button" value="获取验证码" style="margin-top:5px;display:inline-block; width:38%; margin-left:2%;height:40px; background:#ff4400; font-size:14px; color:#fff; border-radius:2px;float: right" onclick="getsms(this)"/>
        </li>
        <li><span>验证码</span>
          <input type="text" class="code" placeholder="请输入验证码" required/>
        </li>--> 
        <li><span>所在地区</span>
          <input type="text" laceholder="Click me to pick an address" id="myAddrs" name="addr" data-key="408533-408534-408535" value="{$c_info.a_1_name} {$c_info.a_2_name} {$c_info.a_3_name}" style="background:url(__PUBLIC__/Wx/img/right.png) no-repeat right center; background-size:20px 20px;"/>
          <input type="hidden" name="a_id" value="">
        </li>
        <li style="margin-bottom:10px;"><span>所在小区</span>
          <input type="text" name="c_id" value="{$c_info.title}" placeholder="请输入小区,例如：中心花园" required/>
        </li>
        <li style="margin-bottom:10px;"><span>详细地址</span>
          <input type="text" name="my_addr" value="{$my_addr}" placeholder="请输入详细地址" required/>
        </li>
        <input type="hidden" name="is_wish_pay" value="{$pay}">
        <!--<li><span>我的家乡</span>
          <input type="text" name="hometown" value="{$hometown}" placeholder="请输入家乡" required/>
        </li>--> 
      </ul>
    </div>
    <div class="button">
      <input type="button" value="提交" onClick="subcode()"/>
    </div>
  </form>
</div>
<!--<script type="text/javascript" src="__PUBLIC__/Wx/js/jquery-1.3.1.min.js"></script>-->
<script type="text/javascript">
    var code;
    //发送验证码
    function getsms(a){
        var mobile = $(a).prev().val();//alert(mobile);//获取手机号
        $.post('<?=U("Authentication/sendsms")?>',{'mobile':mobile},function (d) {
			//alert(d.state);
            //d=JSON.parse(d);//编译json数据
            if(d.state == 0){
                //验证码计时
                var i=60;
                var timer=setInterval(function(){
                    i--;
                    $(a).val("请"+i+"秒后重新请求");
                    $(a).attr("disabled","disabled");
                    if(i==0){
                        clearInterval(timer);
                        $(a).val("发送验证码");
                        $(a).removeAttr("disabled");
                    }
                },1000);
                //获取验证码
                if(d.code){
                    code = d.code;
                }
            }else{
                alert(d.value)
            }//end if
        })//end $.post
    }//end fun getsmsm

	function subcode() {
		$("input[name='a_id']").val($("input[name='addr']").attr('data-key'));//把三级id传给隐藏input
	    var from = $("#authen").serializeArray();
	    console.log(from);
	    for(var i = 0; i  < from.length ; i++){
	        if(from[i].value == ""){
				alert("请填写完整信息");
				return;
			}
		}//end for
		//验证码判断
		var input_code = $(".code").val();
		if(input_code != code || input_code == ''){
		    alert("验证码错误");
		    return;
		}
        $("#authen").submit();
    }
</script> 
<!--<script src="__PUBLIC__/Wx/js/CNAddrArr.min.js"></script>--> 
<script src="__PUBLIC__/Wx/js/jquery.min.js"></script> 
<script src="__PUBLIC__/Wx/js/jquery.scs.min.js"></script> 
<script>
	var addr_arr=new Array;
	
	{$ali}
	
    $(function() {
        /**
         * 通过数组id获取地址列表数组
         *
         * @param {Number} id
         * @return {Array} 
         */ 
        function getAddrsArrayById(id) {
            var results = [];
            if (addr_arr[id] != undefined)
                addr_arr[id].forEach(function(subArr) {
                    results.push({
                        key: subArr[0],
                        val: subArr[1]
                    });
                });
            else {
                return;
            }
            return results;
        }
        /**
         * 通过开始的key获取开始时应该选中开始数组中哪个元素
         *
         * @param {Array} StartArr
         * @param {Number|String} key
         * @return {Number} 
         */         
        function getStartIndexByKeyFromStartArr(startArr, key) {
            var result = 0;
            if (startArr != undefined)
                startArr.forEach(function(obj, index) {
                    if (obj.key == key) {
                        result = index;
                        return false;
                    }
                });
            return result;
        }

        //bind the click event for 'input' element
        $("#myAddrs").click(function() {
			document.activeElement.blur();//让下面键盘不弹出
            var PROVINCES = [],
                startCities = [],
                startDists = [];
            //Province data，shall never change.
            addr_arr[0].forEach(function(prov) {
                PROVINCES.push({
                    key: prov[0],
                    val: prov[1]
                });//alert(prov[0]);alert(prov[1]);//省的id和名称
            });
            //init other data.
            var $input = $(this),
                dataKey = $input.attr("data-key"),
                provKey = 408533, //default province 湖北省
                cityKey = 408534, //default city 武汉市
                distKey = 409096, //default district 武昌区
                distStartIndex = 0, //default 0
                cityStartIndex = 0, //default 0
                provStartIndex = 0; //default 0
			//alert($input); //对象
            if (dataKey != "" && dataKey != undefined) {
                var sArr = dataKey.split("-");//alert(sArr);
                if (sArr.length == 3) {
                    provKey = sArr[0];
                    cityKey = sArr[1];
                    distKey = sArr[2];

                } else if (sArr.length == 2) { //such as 台湾，香港 and the like.
                    provKey = sArr[0];
                    cityKey = sArr[1];
                }
                startCities = getAddrsArrayById(provKey);
                startDists = getAddrsArrayById(cityKey);
                provStartIndex = getStartIndexByKeyFromStartArr(PROVINCES, provKey);
                cityStartIndex = getStartIndexByKeyFromStartArr(startCities, cityKey);
                distStartIndex = getStartIndexByKeyFromStartArr(startDists, distKey);
            }
			//3 scrollers, and the title and id will be as follows:
			//上面的注释如果写在{后会造成无法显示省，可能是js解释程序无法过滤干净造成的bug，不是第一次遇到了
            var navArr = [{
                title: "省",
                id: "scs_items_prov"
            }, {
                title: "市",
                id: "scs_items_city"
            }, {
                title: "区",
                id: "scs_items_dist"
            }];
            SCS.init({
                navArr: navArr,
                onOk: function(selectedKey, selectedValue) {
                    $input.val(selectedValue).attr("data-key", selectedKey);
                }
            });
            var distScroller = new SCS.scrollCascadeSelect({
                el: "#" + navArr[2].id,
                dataArr: startDists,
                startIndex: distStartIndex
            });
            var cityScroller = new SCS.scrollCascadeSelect({
                el: "#" + navArr[1].id,
                dataArr: startCities,
                startIndex: cityStartIndex,
                onChange: function(selectedItem, selectedIndex) {
                    distScroller.render(getAddrsArrayById(selectedItem.key), 0); //re-render distScroller when cityScroller change
                }
            });
            var provScroller = new SCS.scrollCascadeSelect({
                el: "#" + navArr[0].id,
                dataArr: PROVINCES,
                startIndex: provStartIndex,
                onChange: function(selectedItem, selectedIndex) { //re-render both cityScroller and distScroller when provScroller change
                    cityScroller.render(getAddrsArrayById(selectedItem.key), 0);
                    distScroller.render(getAddrsArrayById(cityScroller.getSelectedItem().key), 0);
                }
            });
			
        });
    });
    </script>
</body>
</html>